<template>
  <div
    class="advancedSearch-container"
    style="display: flex; align-items: center; flex-direction: column"
  >
    <!-- 高级检索组件 -->
    <search-bar
      :searchBarWidth="1100"
      @searchResult="receivedSearchData"
      :currentSortType="currentSortType"
      @loading="handleLoading"
      :tempTag="tempTag"
      ref="searchBar"
    ></search-bar>
    <div
      class="searchResult"
      style="width: 1100px; height: auto; margin: 10px 0px"
    >
      <!-- 不同排序的切换通过button实现不是通过tab，参考b站 -->
      <el-card shadow="hover" class="search-result-card">
        <div
          class="clearfix"
          slot="header"
          style="display: flex; flex-direction: column; align-items: flex-start"
        >
          <span
            style="font-size: 16px; font-weight: 600px; margin: 0px 0px 5px 5px"
            >搜索结果</span
          >
          <el-row>
            <el-col :span="24">
              <!-- 使用vue的循环生成button -->
              <el-button
                v-for="(sortTypeItem, index) in sortType"
                :key="index"
                size="mini"
                :class="{
                  'is-active': currentSortType === sortTypeItem.sortTypeName,
                }"
                @click="changeSortType(sortTypeItem.sortTypeName)"
                >{{ sortTypeItem.name }}</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-card
          v-if="loading"
          v-loading="loading"
          style="width: 100%; height: 300px"
          element-loading-text="拼命加载中捏..."
        ></el-card>
        <!-- 检索结果列表组件 -->
        <blog-list :blogLists="searchResult"></blog-list>
      </el-card>
      <!-- 继续加载更多的按钮，在加载的时候设置为不可见，在接收数据时设为可见 -->
      <!-- TODO:分页的信息，以及函数调用 -->
      <div style="width: 100%; text-align: center; margin: 10px auto">
        <!-- 检索更多结果粉 -->
        <el-button
          type="primary"
          plain
          size="medium"
          :loading="loading"
          v-show="isAdvancedSearched"
          @click="searchMore"
          >加载更多</el-button
        >
      </div>
    </div>
    <!-- 回到顶部的按钮,设置至少滚400px可见 -->
    <el-backtop :visibility-height="800" :right="40" :bottom="20"> </el-backtop>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";
// 导入高级检索的检索栏
import searchBar from "@/components/searchBar.vue";
import blogList from "./components/blogList.vue";
@Component({
  name: "advancedSearch",
  components: {
    searchBar,
    blogList,
  },
})
export default class advancedSearch extends Vue {
  @Ref("searchBar") readonly searchBar!: any;

  // 在挂载时获取路由参数
  mounted() {
    // 路由地址参数
    // 判断参数不为空才执行，点击标签进行检索的情况
    var arr = Object.keys(this.$route.query);
    if (arr.length > 0) {
      this.tempTag = this.$route.query;
      console.log(this.tempTag);
      //
      // TODO:给高级检索页面选中对应的tag并提交表单进行检索
    }
  }
  // 首页点击标签传入的tag
  tempTag: any = {};

  // 检索结果的排序方式
  sortType: Array<{ sortTypeName: string; name: string }> = [
    { sortTypeName: "synthesis", name: "相关性" },
    { sortTypeName: "latest", name: "最新发布" },
    { sortTypeName: "hottest", name: "最多浏览" },
    { sortTypeName: "4", name: "最多收藏" },
  ];
  // 当前选中的排序方式,由此判断按钮的激活状态
  currentSortType: string = "synthesis";
  // 点击改变按钮的激活状态
  changeSortType(sortType: string) {
    this.currentSortType = sortType;
    // 赋值后不用调用子组件检索，子组件通过watch监听到值的变化后自动检索
  }
  // 高级检索的检索结果
  searchResult: any = [];
  // 接收子组件传递的数据
  receivedSearchData(data: any) {
    let resSearchResult = data;
    // console.log(resSearchResult);
    resSearchResult.forEach((item: any) => {
      this.searchResult.push({
        knowledgeId: item.knowledgeId,
        title: item.title,
        content: item.content,
        viewCounts: item.viewCounts,
        collectCounts: item.collectCounts,
        likeCounts: item.likeCounts,
        commentCounts: item.commentCounts,
        author: item.nickName,
        publishTime: item.updateTime.split(/[Tt]/)[0],
      });
    });
    // TODO:每次检索之前需要清空检索结果的内容
    // this.searchResult = data.data;
    // 接收数据之后使得加载更多的按钮可见
    this.isAdvancedSearched = true;
  }
  loading: boolean = false;
  // 是否已经检索过了
  isAdvancedSearched: boolean = false;
  // 加载动画
  handleLoading(data: boolean) {
    // 数据加载时让加载更多的按钮不可见
    this.loading = data;
    // console.log(data);
    // 每次启动加载动画，如果子组件的当前页码为0，说明是第一次检索，需要清空检索结果
    if (data && this.searchBar.advancedForm.pageNo === 1) {
      this.searchResult = [];
    }
  }
  // 检索更多的文章
  searchMore() {
    // 调用子组件的方法增加当前检索的页码,再提交表单
    this.searchBar.updateCurrentPage();
    this.searchBar.onSubmitAdvancedForm();
  }
}
</script>

<style lang="scss" scoped>
.advancedSearch-container {
  margin-top: 20px;
  margin: 0 auto;
  .searchResult {
    .search-result-card {
      &::v-deep(.el-card__header) {
        padding: 10px 20px;
      }
      &::v-deep(.el-card__body) {
        padding: 10px 20px;
      }
      .clearfix {
        span {
        }
        .is-active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}
</style>